<template>
  <div>
    <h3 class="chattingName">{{userInfo.username}}</h3>
    <div class="message-box">
      <ChatItem class="view" :text="text"></ChatItem>
      <ChatInputCom class="writing" @sendmessage="sendmessage"></ChatInputCom>
    </div>
  </div>
</template>

<script>
import ChatItem from "./chatItem";
import ChatInputCom from "./chatInputCom";
export default {
  props: {
    userInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      text: []
    };
  },
  methods: {
    sendmessage(message) {
      console.log("father", message);
      this.userInfo.msg = message;
      console.log(this.userInfo);
      this.text.push(this.userInfo);
    //   有些时候会遇到多个组件进行通信并且跨级，此时可以使用浅拷贝新建数据对象来转换传递
    }
  },
  components: {
    ChatItem,
    ChatInputCom
  }
};
</script>

<style scoped>
.chattingName {
  border-bottom: 1px solid #ddd;
  padding-left: 1vw;
  transform: translateY(-50%);
  padding-bottom: 1vh;
  padding-top: 1vh;
}
</style>
